<!--  -->
<template>
    <div class="li-grid-item" :style="styles" @click="onClick">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed } from 'vue';

const props = defineProps({
    // 按钮类型: 垂直 horizontal | 水平 vertical ; 默认: vertical
    index: {
        type: [String, Number],
        default: 0
    },
    bgColor: {
        type: String,
        default: '#ffffff'
    }
});

const emits = defineEmits(['click']);

const styles = computed(() => {
    let style: object = { backgroundColor: props.bgColor };
    return style;
});

// 点击事件
const onClick = () => {
    emits('click');
};

const install = (app: any) => {
    app.component('LiGrid', this);
};
</script>

<style lang="less" scoped>
.li-grid-item {
    // cursor: pointer;
    display: inline-grid;
    padding: 5px 8px;
}
</style>
